import { createButton } from "@utils/createButton";
import { getFormItemControls } from "@utils/showHideFormItemsByData";

export type CheckboxOption = {
  label: string;
  value: string;
  show: boolean;
  disabled: boolean;
}

const showHideFormItemModal = () => {
  const div = document.createElement('div');
  div.id = 'show_hide_formitem_vue_app';
  document.body.appendChild(div);

  const { createApp, ref, reactive, onUnmounted, watch } = Vue;

  const app = createApp({
    template: `
      <n-modal v-model:show="showModal" preset="dialog" style="width: 700px; opacity: 0.8">
        <template #header>
          <div>控制表单项显示隐藏</div>
        </template>
        <div>
          <n-grid :y-gap="8" :cols="3">
            <n-gi>
              <n-grid :cols="1">
                <n-gi v-for="item in checkboxOptions1" :key="item.label">
                  <n-checkbox
                    @mouseenter="() => mouseenterHandler(item)"
                    @mouseleave="() => mouseleaveHandler(item)"
                    @update:checked="updateHandler(item)"
                    :checked="item.show"
                    :disabled="item.disabled"
                    v-if="item.value"
                    :value="item.value"
                    :label="item.label"
                  />
                </n-gi>
              </n-grid>
            </n-gi>
            <n-gi :span="2">
              <n-grid :cols="1">
                <n-gi v-for="item in checkboxOptions2" :key="item.label">
                  <n-checkbox
                    @mouseenter="() => mouseenterHandler(item)"
                    @mouseleave="() => mouseleaveHandler(item)"
                    @update:checked="updateHandler(item)"
                    :checked="item.show"
                    :disabled="item.disabled"
                    :value="item.value"
                    :label="item.label"
                  />
                </n-gi>
              </n-grid>
            </n-gi>
          </n-grid>
        </div>
      </n-modal>
    `,
    setup() {
      const showModal = ref(true);
      const mouseleaveHandler = () => {
        const elem = document.querySelector('#show_hide_formitem_vue_app_rect') as HTMLElement;

        if(elem) {
          elem.remove();
        }
      };

      const {list1, list2} = getFormItemControls();

      const checkboxOptions1 = reactive(list1);
      const checkboxOptions2 = reactive(list2);

      onUnmounted(() => {
        mouseleaveHandler();
      });

      watch(showModal, (oldValue: boolean, newValue: boolean) => {
        if(newValue !== oldValue) {
          mouseleaveHandler();
        }
      });

      return {
        showModal,
        checkboxOptions1,
        checkboxOptions2,
        mouseleaveHandler,
        updateHandler: (item: CheckboxOption) => {
          item.show = !item.show;
          const elem = document.querySelector(item.value) as HTMLElement;

          if (item.show) {
            elem.style.display = 'table-row';
          } else {
            elem.style.display = 'none';
          }

          mouseleaveHandler();

          localStorage.setItem('formItemControl', JSON.stringify({list1: checkboxOptions1, list2: checkboxOptions2}));
        },
        mouseenterHandler: (item: CheckboxOption) => {
          const elem = document.querySelector(item.value) as HTMLElement;
          const rect = elem.getBoundingClientRect();
          const div = document.createElement('div');
          div.id = `show_hide_formitem_vue_app_rect`;
          div.style.position = 'fixed';
          div.style.top = `${rect.top}px`;
          div.style.left = `${rect.left}px`;
          div.style.width = `${rect.width}px`;
          div.style.height = `${rect.height}px`;
          div.style.backgroundColor = '#9bc0e3';
          div.style.zIndex = '9';
          div.style.opacity = '0.8';

          document.body.appendChild(div);
        },
      }
    }
  });

  app.use(naive);
  app.mount('#show_hide_formitem_vue_app');
}

export const createShowHideBtn = () => {
  const bugTitleBox = document.querySelector('#summary_alias_container') as HTMLDivElement;
  
  createButton(
    '隐藏表单项',
    (button) => {
      button.classList.add('plain-button');
      (bugTitleBox.parentNode as HTMLElement).appendChild(button);
    },
    () => {
      showHideFormItemModal();
    }
  );
}